<template>
	<view class="colleagues">
		
		<view class="bar">
			<u-navbar
		   title="同事动态"
		   :placeholder="true"
			>
			<view slot="left">
				<u-icon name="arrow-left" size="22" @click="navTo()"></u-icon>
			</view>
			<view slot="right">
				<u-icon @click="show = true" size="25" name="camera-fill" color="#0055ff"></u-icon>
			</view>
			</u-navbar>
			<u-popup 
			:show="show" 
			:closeOnClickOverlay="true" 
			@close="show = false" 
			:round="10">
				<view>
				     <button @click="getCamera()">拍摄</button>
					 <button @click="getPhoto()">从相册选择</button>
					  <button @click="show = false">取消</button>
				</view>
			</u-popup>
		</view>
		
		<view class="colleagues-dynamic">
			<view class="concern">
				<image class="img" src="../../../static/user/dynamic/collea.png"></image>
				<view style="padding-top: 20px; font-size: 15px; font-weight: 600;">
					<text>已为你关注同部门的同事</text>
				</view>
				<view >
					<text style="font-size: 14px;">同事动态的评论和点赞仅同事和好友可见</text>
				</view>
				<view>
					<text style="font-size: 15px; color:#61749C;">管理我的关注</text>
				</view>
			</view>
			<!-- 若没有动态则显示该动态 -->
			<view class="see" v-if="dynamicList.length ===0 ? true:false">
				<view class="avatar">
					<u-icon size="25" name="moments" color="white"></u-icon>
				</view>
				
				<view class="name" >
					看看动态
				</view>
				
				<view class="content">
					你的同事朋友圈来了，点击右上角的小相机，发布你的第一个动态吧！
				</view>
				
				<!-- 单个视频 -->
				<view class="video">
					<video 
					src="https://nailcampus.oss-cn-beijing.aliyuncs.com/default/introduction.mp4"
					controls
					style="height: 300rpx; width: 60%;"
					>
					</video>
				</view>
				
				<view class="dateTime">
					2023-12-15 16:28
				</view>
				
				<view class="comments">
					<view class="thumbs-up">
						<button type="default"><u-icon size="28" color="#C1C2C3" name="thumb-up" ></u-icon><text style="margin-left: 15rpx;">点赞</text></button>
					</view>
					
					<view class="comment">
						<button type="default"><u-icon size="28" color="#C1C2C3" name="chat"></u-icon> <text style="margin-left: 16rpx;">评论</text></button>
					</view>
				</view>
				
			</view>
			<!--  好友动态  -->
			<view class="all-dynamic" v-for="dynamic,index in dynamicList" :key="dynamic.id">
				<u-avatar
				size="45"
				:text="getAvatar(dynamic)"
				shape="square" 
				bg-color="#0080FF"
				font-size='15'
				:src="dynamic.userAvatar"
				></u-avatar>
				
				<view style="width: 100%;">
					
					<view style="margin-left: 2%; font-size: 28rpx;font-weight: 600; color: #6D849A; letter-spacing: 1rpx;">
						<text>{{dynamic.userName}}</text>
					</view>
					
					<view style="margin-left: 2%; font-size: 28rpx;letter-spacing: 1rpx;">
						<text style="word-break: break-all;">{{dynamic.content}}</text>
					</view>
					
					<view v-if="true" style="display: flex;flex-wrap: wrap;">	
							<view 
							:class="[
								{'view3' : dynamic.resourceList.length >= 3 && dynamic.resourceList.length != 4},
								{'view2' : dynamic.resourceList.length === 2 || dynamic.resourceList.length === 4},
								{'view1' : dynamic.resourceList.length === 1}
							]"
							v-for="(resource,i) in dynamic.resourceList" :key="i" >
								<!-- 照片 -->
									<image
									v-if="getResouces(resource)"
									:class="[
										{'resource3' : dynamic.resourceList.length >= 3 && dynamic.resourceList.length != 4},
										{'resource2' : dynamic.resourceList.length == 2 || dynamic.resourceList.length == 4},
										{'resource1' : dynamic.resourceList.length == 1}
									]"
									:src="resource"></image>
								
									  <!-- 视频 -->
									<video
									 v-if="!getResouces(resource)"
									:class="[
										{'resource3' : dynamic.resourceList.length >= 3 && dynamic.resourceList.length != 4},
										{'resource2' : dynamic.resourceList.length == 2 || dynamic.resourceList.length == 4},
										{'resource1' : dynamic.resourceList.length == 1}
									]"
									 :src="resource" 
									 controls
									 ></video>
							</view>
					</view>
					
					<view style="margin-left: 2%; margin-top: 1%; font-size: 24rpx; color: #9d9d9d;">
						{{dynamic.createTime}}
					</view>
					
					<view class="operation">
						<button @click="thumbsUp(dynamic)"><u-icon size="25" color="#C1C2C3" name="thumb-up" ></u-icon><text>{{dynamic.likesList.length===0?'点赞':dynamic.likesList.length}}</text></button>
						<button @click="comment(index)"><u-icon size="25" color="#C1C2C3" name="chat"></u-icon>{{dynamic.replyList.length===0?'评论':dynamic.replyList.length}}</button>
					</view>
					
					<u-popup  :show="popShow" mode="bottom" overlayOpacity="0" @close="popShow = false" @open="popShow = true">
					        <view style=" display: flex; width: 100%;height: 100%;padding: 2%; background-color: #ebebeb;">
					            <textarea
								style="background-color: white; border-radius: 10rpx;padding: 3%;"
								v-model="dynamicReply.content" 
								maxlength=-1  
								placeholder="评论"
								:auto-focus="true"
								:auto-blur="true"
								:auto-height="true"
								@input="input"
								></textarea>
								<button @click="reply(dynamic,index)"
								:class="[
									{'send1' : dynamicReply.content.length == 0},
									{'send2' : dynamicReply.content.length != 0}
								]">发送</button>
					        </view>
						</u-popup>
					
					<view 
					style="display: flex;flex-wrap:wrap; margin-left: 2%;margin-top: 2%;background-color: #ebebeb;">
						<view 
						style=" color: #b4b4b4; font-size: 28rpx;padding: 1%;"
						v-for="(likes,index) in dynamic.likesList" :key="index">
							<text >{{index===dynamic.likesList.length-1? likes.userName:likes.userName+','}}</text>
						</view>
					</view>
					
					<view style="margin-left: 1%; margin-top: 1%;" v-for="(reply,index) in dynamic.replyList" :key="index">
						<view style="display: flex;flex-wrap: wrap;">
							<view style="color:#61749C;font-size: 27rpx;letter-spacing: 1rpx;">
								{{reply.userName}} 
								<text style="word-break:break-all;color:black;">
									：{{reply.content}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				popShow:false,
				show:false,
				dynamicList:[],
				navId:null,
				dynamicReply:{
					id:0,
					userId:0,
					dynamicId:0,
					content:'',
				},
				uToast:{
					type:'success',
					title:'成功主题',
					message:'回复成功',
					iconUrl:'https://cdn.uviewui.com/uview/demo/toast/success.png'
				},
			}
		},
		computed:{
		},
		methods:{
			input(){
				// console.log(this.dynamicReply.content)
			},
			showToast(params){
				this.$refs.uToast.show({
					...params
				})
			},
			 comment(index){
				this.popShow = true
				uni.setStorageSync('index',index)
			},
			reply(){
				if(this.dynamicReply.content===''||this.dynamicReply.content===null){
					this.uToast.type = 'default'
					this.uToast.title = '默认主题'
					this.uToast.message = '回复内容不能为空'
					this.showToast(this.uToast)
				}else{
					let index = uni.getStorageSync('index')
					this.dynamicReply.dynamicId = this.dynamicList[index].id
					this.dynamicReply.userId = uni.getStorageSync('user').id
					console.log("回复的数据为:",this.dynamicReply)
					uni.request({
						url:'http://localhost:8090/nailCampus/dynamic/replyDynamic',
						method:'POST',
						data:this.dynamicReply,
						success:res=> {
							this.dynamicList[index].replyList.push({'userName':uni.getStorageSync('user').userName,'content':this.dynamicReply.content})
							this.popShow = false
							this.uToast.type = 'success'
							this.uToast.message = '回复成功'
							this.showToast(this.uToast)
							this.dynamicReply.content = ''
						},
						fail:res=> {
							this.uToast.message = '回复失败,当前网络拥挤'
							this.showToast(this.uToast)
							 this.popShow = false
						}
					})
				}
			},
			// 拍摄
			getCamera(){
				this.show = false;
				uni.chooseImage({
					sizeType:['original'],
					sourceType:['camera'],
					success(res) {
						let fileList = []
						for(let i=0 ;i < res.tempFiles.length ;i++){
							let file = {path:'',name:'',type:''}
							file.path = res.tempFiles[i].path
							file.name = res.tempFiles[i].name
							file.type = res.tempFiles[i].type
							fileList.push(file)
						}
						uni.setStorageSync('fileList',fileList)
						uni.navigateTo({
							url:'/pages/user/dynamic/edit-dynamic/edit-dynamic'
						})
					},
					fail(err) {
						console.log('chooseImage fail',err)
					}
				})
			},
			getPhoto(){
				this.show = false;
				uni.chooseImage({
					count:9,
					sizeType:['original'],
					sourceType:['album'],
					success(res) {
						let fileList = []
						for(let i=0 ;i < res.tempFiles.length ;i++){
							let file = {path:'',name:'',type:''}
							file.path = res.tempFiles[i].path
							file.name = res.tempFiles[i].name
							file.type = res.tempFiles[i].type
							fileList.push(file)
						}
						uni.setStorageSync('fileList',fileList)
						uni.navigateTo({
							url:'/pages/user/dynamic/edit-dynamic/edit-dynamic'
						})
					}
				})
			},
			// 判断是图片还是视频
			getResouces(resource){
				let type = resource.slice(resource.length-3,resource.length)
				if(type === 'mp4'){
					return false;
				}else{
					return true;
				}
			},
			thumbsUp(dynamic){
				let user = uni.getStorageSync('user')
				let likes = {userId:'',userName:''}
				likes.userId = user.id
				likes.userName = user.userName
				dynamic.likesList.push(likes)
			},
			navTo(){
				if(this.navId === '1'){
					uni.switchTab({
						url:'/pages/book/index'
					})
				}else{
					uni.switchTab({
						url:'/pages/user/index'
					})	
				}
			},
			getAvatar(dynamic){
				let text = '';
				if(dynamic.userAvatar === null|| dynamic.userAvatar.length === 0){
					text = dynamic.userName.slice(-2);
				}else{
					text = null;
				}
				return text;
			},
		},
		onLoad(res) {
			this.navId = res.id
			uni.request({
				url:'http://localhost:8090/nailCampus/dynamic/getAllDynamic',
				header:{
					token:uni.getStorageSync('token')
				},
				success:res=> {
					this.dynamicList = res.data.data
					console.log(res.data.data)
				},
				fail:res=>{
					this.uToast.type = 'error'
					this.uToast.message = '服务器连接失败，请检查您的网络'
					this.showToast(this.uToast)
				}
			})
			
		},
		onUnload() {
			 
		}
	}
</script>

<style lang="less" scoped>
	.colleagues{
		.colleagues-dynamic{
			.concern{
				margin-top: 3%;
				margin-left: 2%;
				width: 95%;
				height: 100px;
				background-color: #F8F8F8;
				border-radius: 12px;
				.img{
					border-radius: 15px;
					float: left;
					height: 100px;
					width: 80px;
				}
			}
			.see{
				margin-top: 5%;
				margin-left: 2%;
				.avatar{
					float: left;
					padding-top: 5px;
					padding-left: 5px;
					background-color: #01B651;
					border-radius: 6px;
					height: 30px;
					width: 30px;
				}
				.name{
					padding-top: 1%;
					margin-left: 10%;
					font-size: 14px;
					font-weight: 600;
					color: #61749C;
				}
				.content{
					margin-left: 10%;
					font-size: 13px;
					letter-spacing: 1px;
				}
				.video{
					display: flex;
					margin-top: 2%;
					margin-left: 10%;
				}
				.dateTime{
					margin-top: 1%;
					margin-left: 10%;
					color: #C1C2C3;
				}
				.comments{
					margin-left: 1%;
					margin-top: 1%;
					.u-icon{
						width: 30%;
						float: left;
					}
					.thumbs-up{
						.u-icon{
							margin-top: 3px;
						}
					}
					.comment{
						.u-icon{
							margin-top: 5px;
						}
					}
						button{
							float: left;
							font-size: 14px;
							padding-left: 0px;
							background-color: white;
							width: 20%;
							color: #C1C2C3;
						}
						button::after{
							border: none;
						}
				}
			}
			.all-dynamic{
				margin-top: 3%;
				margin-left: 3%;
				width: 93%;
				display: flex;
				.view3{
					margin-left: 2%;
					width: 31%;
					height: 200rpx;
					margin-top: 1%;
				}
				.view2{
					margin-left: 2%;
					width: 45%;
					height: 250rpx;
					margin-top: 1%;
				}
				.view1{
					width: 80%;
					margin-top: 1%;
					margin-left: 2%;
					height: 400rpx;
				}
				.resource1{
					width: 100%;
					height: 400rpx;
				}
				.resource2{
					width: 100%;
					height: 250rpx;
				}
				.resource3{
					width: 100%;
					height: 200rpx;
				}
				.operation{
					display: flex;
					margin-top: 1%;
					margin-left: 2%;
					// border: 1rpx solid red;
					button{
						padding: 0rpx;
						display: flex;
						color: #a0a0a1;
						background-color: white;
						letter-spacing: 1rpx;
						line-height: 50rpx;
						font-size: 25rpx;
						height: 50rpx;
						margin-left: 0%;
						margin-right: 5%;
					}
					button::after{
						border: none;
					}
				}
				.send1{
					background-color: #ebebeb;
					line-height: 60rpx; 
					color: #c3c3c3; 
					font-size: 27rpx; 
					margin-top: 1%;
					width: 14%; 
					height: 60rpx;
				}
				.send2{
					background-color: #0080f0;
					line-height: 60rpx;
					color: white;
					font-size: 27rpx; 
					margin-top: 1%;
					width: 15%; 
					height: 60rpx;
				}
			}
		}
	}
</style>